<template>
  <div class="exclusive">
    <div class="exclusive-content">
      <img
        src="https://img2.baidu.com/it/u=4223136793,3740756979&fm=253&fmt=auto&app=138&f=JPEG?w=667&h=500"
        alt=""
      />
    </div>
    <h4>专属服务订购</h4>
    <div class="exclusive-text-flex">
      <div
        class="exclusive-text"
        v-for="item in exclusivelist"
        :key="item.id"
        :style="`background-color: ${item.bgcolor};`"
      >
        <!--  :style="background: {item.bgcolor}" -->
        <p>{{ item.server }}</p>
        <p class="exclusive-text-center">{{ item.fangan }}</p>
        <p>{{ item.gobuy }}</p>
      </div>
    </div>
  </div>
</template>
<script>
import { getExclusiveList } from '@/api/designs';
export default {
  data() {
    return {
      exclusivelist: [],
    };
  },
  created() {
    this.getExclusiveList();
  },
  methods: {
    async getExclusiveList() {
      const res = await getExclusiveList();
      this.exclusivelist = res.data;
    },
  },
};
</script>
<style
  lang="scss"
  scoped
>
.exclusive {
  margin-top: 46px;
  .exclusive-content {
    margin: 11px auto 24px;
    width: 351px;
    height: 147px;
    img {
      width: 100%;
      height: 100%;
      background-color: pink;
    }
  }
  h4 {
    margin-left: 13px;
    margin-bottom: 15px;
    color: rgba(16, 16, 16, 100);
    font-size: 18px;
    font-weight: 520;
  }
  .exclusive-text-flex {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    .exclusive-text {
      margin-bottom: 18px;
      width: 158px;
      height: 119px;
      font-size: 14px;
      line-height: 20px;
      border-radius: 2px;
      background-color: rgba(182, 208, 225, 100);
      text-align: center;
      box-shadow: 0px 2px 6px 0px rgba(202, 199, 199, 40);
      p {
        margin: 10px 11px;
      }

      p:first-child {
        text-align: left;
      }
      .exclusive-text-center {
        width: 135px;
        height: 40px;
        background-color: #f2f2f2;
        line-height: 40px;
      }
    }
  }
}
</style>
